<template>
  <div class="root">
    <ul v-if="current">
      <li v-for="(section, index) in sections" :key="index" @click="navTo(index)">{{ section }}</li>
      <li @click="current = ''">返回</li>
    </ul>
    <template v-else>
      <div v-for="(chapter, key) in dataArray" :key="key">
        <p @click="show(key)">{{ key }}</p>
      </div>
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: '',
  data() {
    return {
      dataArray: window.$chapter,
      current: ''
    }
  },
  computed: {
    sections() {
      return this.dataArray[this.current] || []
    }
  },
  methods: {
    show(key) {
      this.current = key
    },
    navTo(index) {
        const fp = encodeURIComponent(`./${this.current}/${this.sections[index]}.json`)
        this.$router.push('/home?fp=' + fp)
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus"></style>
